<template>
  <div class="page">
    <HeaderBar :fixed="true" :theme="theme" :placeholder="true" :active="'about'"/>
    <div class="page-main">
      <div class="bread-crumbs">
        <div class="item">
          <a href="index.html">首页</a>
          <i class="iconfont icon-arrow sp"></i>
        </div>
        <div class="item">
          <a href="about.html">探索安德</a>
          <i class="iconfont icon-arrow sp"></i>
        </div>
        <div class="item">
          <a href="news.html">新闻资讯</a>
          <i class="iconfont icon-arrow sp"></i>
        </div>
        <div class="item">
          <span>新闻详情</span>
        </div>
      </div>
      <div class="news-main">
        <a href="news.html" class="news-tag hv-opacity">新闻中心</a>
        <div class="news-title">{{ info.title || '' }}</div>
        <div class="news-info">{{ info.cate }}｜{{ info.create_time }}</div>
        <div class="news-content">
          <div class="content" v-html="info.content"></div>
        </div>
        <div class="news-nav flex-between">
          <a :href="'news_detail.html?id=' + prev.id" class="more-card news-prev hv-opacity" v-if="prev">
            <div class="label">上一篇</div>
            <div class="title text-wrap-2">{{ prev.title }}</div>
          </a>
          <a href="javascript:;" class="more-card news-prev hv-opacity" v-else>
            <div class="label">上一篇</div>
            <div class="title text-wrap-2">无</div>
          </a>
          <a :href="'news_detail.html?id=' + next.id" class="more-card news-next hv-opacity" v-if="next">
            <div class="label">下一篇</div>
            <div class="title text-wrap-2">{{ next.title }}</div>
          </a>
          <a href="javascript:;" class="more-card news-next hv-opacity" v-else>
            <div class="label">下一篇</div>
            <div class="title text-wrap-2">无</div>
          </a>
        </div>
      </div>
    </div>
    <FooterBar />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getUrlParams, hideLoading } from '../../utils/utils'
import { getNewsDetail } from '@/api/news' 

import HeaderBar from '@/components/HeaderBar/index.vue'
import FooterBar from '@/components/FooterBar/index.vue'

const theme = ref('white')
const id = ref(0)
const info = ref({})
const prev = ref(null)
const next = ref(null)

onMounted(() => {
  id.value = getUrlParams('id') || ''
  loadData()
});

const loadData = () => {
  const params = {
    id: id.value
  }
  getNewsDetail(params).then(res => {
    info.value = res.data.info
    prev.value = res.data.pre
    next.value = res.data.next
    hideLoading()
  })
};

</script>

<style lang="scss">
@use '@/assets/style/common.scss';
.page {
  width: 100%;
  height: 100%;
}
.page-main {
  padding: 5rem /* 80/16 */ 5rem /* 80/16 */ 3.125rem /* 50/16 */;
  min-height: calc(100vh - 4.375rem /* 70/16 */);
}
.news-main {
  width: 75rem /* 1200/16 */;
  margin: 0 auto;
  max-width: 92%;
}
.news-tag {
  display: block;
  font-size: .9375rem /* 15/16 */;
  line-height: 1;
  color: #888888;
  text-align: center;
}
.news-title {
  margin-top: .625rem /* 10/16 */;
  color: #000000;
  font-size: 2.8125rem /* 45/16 */;
  line-height: 3.75rem /* 60/16 */;
  text-align: center;
}
.news-info {
  margin-top: 2.8125rem /* 45/16 */;
  color: #000000;
  font-size: .875rem /* 14/16 */;
  line-height: 1;
  text-align: center;
}
.news-content {
  margin-top: 3.75rem /* 60/16 */;
  padding-bottom: 3.75rem /* 60/16 */;
  border-bottom: 1px dashed #D8D8D8;
  .content {
    font-size: 1.125rem /* 18/16 */;
    line-height: 2.125rem /* 34/16 */;
    p, span {
      font-size: 1.125rem /* 18/16 */;
      line-height: 2.125rem /* 34/16 */;
    }
    img {
      display: block;
      max-width: 100%;
      margin: 0 auto;
    }
  } 
}
.news-nav {
  margin-top: 5rem /* 80/16 */;
}
.more-card {
  width: calc(50% - 1.5625rem /* 25/16 */);
  padding: 2.8125rem /* 45/16 */ 3.125rem /* 50/16 */;
  border-radius: .625rem /* 10/16 */;
  background: #F9F9F9;
  .label {
    font-size: 1.125rem /* 18/16 */;
    line-height: 1;
    color: #888888;
  }
  .title {
    margin-top: .875rem /* 14/16 */;
    font-size: 1.375rem /* 22/16 */;
    line-height: 2.125rem /* 34/16 */;
    height: 4.25rem /* 68/16 */;
    color: #000000;
  }
}
.bread-crumbs {
  display: flex;
  align-items: center;
  margin-bottom: 2rem /* 32/16 */;
  .item {
    display: flex;
    align-items: center;
    a {
      color: #666666;
      font-size: .875rem /* 14/16 */;
      line-height: 1;
      &:hover {
        opacity: .85;
      }
    }
    span {
      color: #333333;
      font-weight: bold;
      font-size: .875rem /* 14/16 */;
      line-height: 1;
    }
  }
  .sp {
    margin: 0 .5625rem /* 9/16 */;
    font-size: .875rem /* 14/16 */;
    color: #333333;
  }
}
</style> 